<template>
    <div class="invoiceDiv">
        <div class="bg-div"> </div>
        <div class="header-div">
            <img class="closeBtn" src="../../../assets/images/invoice/closeBtn.png" alt="">
            <span>
                我的发票
            </span>
            <img class="closeBtn backBtn" src="../../../assets/images/invoice/leftbtn.png" alt="" @click="clickFH()">
            <img class="closeBtn kfBtn" src="../../../assets/images/invoice/rightIcon.png" alt="">

        </div>
        <div class="content-div">
            <div class="clickBtn" @click="clickBtn()"></div>
            <img src="../../../assets/images/invoice/zu.png" alt="">
        </div>
        <div class="footer">
            电子发票包括月结类、话费类、流量充值类、宽带类、充值卡类、其他类共六类发票。根据各省业务规则定义，部分省份只支持部分类别电子发票开具、部分省份不支持在线录入发票抬头信息，具体以发票开具实际结果为准。
            电子发票开具后，可选择将发票推送至邮箱，用户可以在邮箱进
        </div>
    </div>
</template>
<script>
export default {
    name: 'invoiceDiv',
    data() {
        return {}
    },
    methods: {
        clickFH() {
            this.$router.push("/home"); 
        },
        clickBtn(){
            // alert(111111)
            this.$router.push("/invoiceAnce"); 
        }
    }
}
</script>
<style lang="less" scoped>
.invoiceDiv {
    .bg-div {
        width: 100%;
        height: 4.83rem;
        background: linear-gradient(180deg, #2892FF 0%, rgba(40, 146, 255, 0) 100%);
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
    }

    .header-div {
        position: absolute;
        z-index: 2;
        left: 0;
        top: 0;
        width: 100%;
        height: .9rem;
        text-align: center;
        line-height: .9rem;
        .closeBtn {
            width: 0.48rem;
            height: 0.48rem;
            position: absolute;
            left: 0.9rem;
            top: .2rem;
        }
        .backBtn{
                position: absolute;
                    left: 0;
                    top: 0.05rem;
                    width: 0.8rem;
                    height: 0.8rem;
        }
        .kfBtn{
            position: absolute;
                right: 0.2rem;
                top: .2rem;
                left: auto;
                width: 0.39rem;
                height: 0.48rem;
        }
        span{
            font-size: 0.36rem;
                color: white;
                width: 1.64rem;
                height: 0.48rem;
                text-align: center;
                display: inline-block;
                position: absolute;
                left: 3.03rem;
        }
    }
    .content-div{
        position: absolute;
        z-index: 1;
        width: 6.9rem;
        height: auto;
        margin: 0 auto;
        top: 1.28rem;
        left: 0.3rem;
        img{

            width: 100%;
        }
        .clickBtn{
            width: 91%;
            height: 1.2rem;
            position: absolute;
            z-index: 3;
            left: .3rem;
            top: 4rem;
            opacity: .1;
        }
    }
    .footer{
            width: auto;
            position: absolute;
            bottom: 0.16rem;
            left: 0.3rem;
            right: 0.3rem;
            font-weight: normal;
            font-size: 0.24rem;
            color: #666666;
            line-height: .4rem;
            text-align: justify;
            font-style: normal;
    }

}
</style>
